<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" href="hallo.css" />
    <link rel="stylesheet" href="image.css" />
    <link rel="stylesheet" href="fontawesome/css/font-awesome.css" charset="utf-8" />
<!--[if lt IE 9]>
    <link rel="stylesheet" href="fontawesome/css/font-awesome-ie7.css" charset="utf-8" />
<![endif]-->
    <link rel="stylesheet" href="annotate.css" />
    <script src="../bower_components/jquery/jquery.js"></script>
    <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="../bower_components/rangy-official/rangy-core.js"></script>
    <script src="../dist/hallo.js"></script>
    <script src="http://szabyg.github.io/annotate.js/lib/underscore-min.js"></script>
    <script src="http://szabyg.github.io/annotate.js/lib/backboneJS/backbone.js"></script>
    <script src="http://szabyg.github.io/annotate.js/lib/jquery.rdfquery.debug.js"></script>
    <script src="http://szabyg.github.io/annotate.js/lib/vie/vie.js"></script>
    <script src="http://szabyg.github.io/annotate.js/lib/annotate.js"></script>

    <script src="hallo.js"></script>

    <title>Hallo example</title>
  </head>
  <body>

    <button id="enable">Enable</button>
    <button id="disable">Disable</button>
    <p id="modified">Editables have not been modified</p>

    <h1 class="editable">Hello World</h1>
    <div class="editable">
Turkey, known officially as the Republic of Turkey, is a Eurasian country that stretches across the Anatolian peninsula in western Asia and Thrace in the Balkan region of southeastern Europe. Turkey is one of the six independent Turkic states. Turkey is bordered by eight countries: Bulgaria to the northwest; Greece to the west; Georgia to the northeast; Armenia, Azerbaijan and Iran to the east; and Iraq and Syria to the southeast. 
    </div>

    <script>
        searchresult = [];
        searchresult.push({
            url: 'http://www.perfectoutdoorweddings.com/wp-content/uploads/2011/06/beach.jpg',
            alt: 'Crazy beach, but no girls'
        });
        searchresult.push({
            url: 'http://www.photosnewportbeach.com/artwork/newport-beach-sunset.jpg',
            alt: 'Sunset from my balconey'
        });
        searchresult.push({
            url: 'http://www.capetowndailyphoto.com/uploaded_images/Beach_Girl_IMG_3563-761741.jpg',
            alt: 'My sister in Capetown'
        });
        searchresult.push({
            url: 'http://news.fullorissa.com/wp-content/uploads/2011/06/PuriBeach.jpg',
            alt: 'New Dehli chatting'
        });
        searchresult.push({
            url: 'http://www.hotelplan.ch/CMS/1/1823506/4/ferien_auf_den_malediven.jpg',
        });
        searchresult.push({
            url: 'http://stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/3410783929310572ed16o/742619149_CYkrj-750x750.jpg',
            alt: 'Blue mountains'
        });
        searchresult.push({
            url: 'http://media.smashingmagazine.com/images/fantastic-hdr-pictures/hdr-10.jpg',
            alt: 'Sun, Clouds, Stuff'
        });
        searchresult.push({
            url: 'http://farm3.static.flickr.com/2139/1524795919_62631ab870.jpg',
            alt: 'Two lone trees'
        });
        searchresult.push({
            url: 'http://www.bigpicture.in/wp-content/uploads/2010/12/HDR-Photography-By-Paul-21-660x494.jpg',
            alt: 'Bridge'
        });
      jQuery('#enable').button().click(function() {
        jQuery('.editable').hallo({
          plugins: {
            'halloformat': {},
            'halloblock': {},
            'hallojustify': {},
            'hallolists': {},
            'hallolink': {},
            'halloannotate': {},
            'halloreundo': {}
          },
          editable: true,
          toolbar: 'halloToolbarFixed'
        })
        .hallo('protectFocusFrom', jQuery('#enable'));
        jQuery('.editable').bind('hallomodified', function(event, data) {
            jQuery('#modified').html("Editables modified");
        });
        jQuery('.editable').bind('halloselected', function(event, data) {
            jQuery('#modified').html("Selection made");
        });
        jQuery('.editable').bind('hallounselected', function(event, data) {
            jQuery('#modified').html("Selection removed");
        });
      });
      jQuery('#disable').button().click(function() {
        jQuery('.editable').hallo({editable: false});
      });
      jQuery('.editable').bind('hellodeactivated', function() {
        $(this).hallo({editable:false});
      });
    </script>
  </body>
</html>
